<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" isELIgnored="false" %>
<%@ include file="/views/common/resources.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link href="<%=basePath %>resources/js/common/plugin/select2/css/select2.min.css" rel="stylesheet"/>
    <link href="<%=basePath %>resources/js/common/plugin/My97DatePicker/skin/WdatePicker.css" rel="stylesheet">
    <link href="<%=basePath %>resources/js/common/plugin/rebox/jquery-rebox.css" rel="stylesheet">
    <link href="<%=basePath %>resources/css/report.css" rel="stylesheet">

    <script src="<%=basePath %>resources/js/common/plugin/select2/js/select2.min.js"></script>
    <script src="<%=basePath %>resources/js/common/plugin/echarts/echarts.min.js"></script>
    <script src="<%=basePath %>resources/js/common/plugin/My97DatePicker/WdatePicker.js"></script>
    <script src="<%=basePath %>resources/js/common/plugin/rebox/jquery-rebox.js"></script>
    <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.3&key=d782d52560e7b77e0d764b1496c60dde&plugin=AMap.Geocoder"></script>
    <script src="<%=basePath %>resources/js/common/util/common.js"></script>
    <title>证据管理</title>

    <style type="text/css">

        #imageLable .oneWarp {
            width: 20%;
            padding-left: 20px;
            padding-top: 8px;
            /* height: 320px; */
            float: left;
        }

        #imageLable .one-bottom {
            padding: 5px;
            height: 110px;
        }

        #imageLable .one {
            border: 1px solid #d2cfcb;
        }

        .one-top {
            width: 100%;
        }

        .one-bottom {
            width: 100%;
        }

        #largeImgage {
            vertical-align: middle;
            text-align: center;
            height: 95%;
            width: 100%;
        }

        #imageLable .imgD {
            padding-top: 75%;
        }

        #imageLable .imgA img {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        #imageLable .pageAlways {
            page-break-after: always;
        }

        .marginL0 {
            margin-left: 0;
        }

        .imgWarp {
            height: 100%;
            text-align: center;
        }

        #imageLable .largeVideoCls img {
            width: 60px;
            height: 60px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -30px;
            margin-top: -30px;
            z-index: 100;
        }

        #imageLable .largeVideoCls video {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%
        }

        .historyPic .imgA {
            border: none;
        }
    </style>
</head>
<script type="text/javascript">
    var appCtx = "<%=basePath%>";
    var vid = "<%=request.getParameter("vid")%>";
</script>
<body class="historyPic">
<div class="page">
    <div class="slider pa clearfix">
        <%@ include file="/views/common/menu.jsp" %>
    </div>
    <div class="main pr">
        <%@ include file="/views/common/top.jsp" %>

        <%--<%@ include file="/views/common/top.jsp" %>--%>
        <%--<div class="main pr">--%>
        <%--<div class="slider pa clearfix">--%>
        <%--<%@ include file="/views/common/menu.jsp" %>--%>
    </div>
    <div class="content" style="padding-left: 55px;">
        <div class="query clearfix">

            <div class="query-list fl">
                <select class="query-select" id="selectVehicleUnitSel">

                </select>
            </div>

            <div class="query-list fl" id="vehicleSelDiv">
                <select class="query-select" id="selectVehicleSel">

                </select>
            </div>

            <div class="query-list fl">
                <select class="query-select" id="eventCode">
                    <option value="">请选择违规类型</option>
                    <option value="5">打电话</option>
                    <option value="6">抽烟</option>
                    <option value="9">急减速</option>
                    <option value="10">急加速</option>
                    <option value="13">车道偏离报警触发</option>
                    <option value="14">前向碰撞报警触发</option>
                    <option value="4">打哈欠</option>
                    <option value="7">闭眼</option>
                    <option value="8">注意力分散</option>
                </select>
            </div>

            <div class="query-list fl">

                <input type="text" id="inputStartDate" class="query-input fl Wdate Time_input"
                       onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d %H:%m:%s'})">
                <span class="fl query-text">至</span>
                <input type="text" id="inputEndDate" class="query-input Wdate Time_input"
                       onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d %H:%m:%s'})">
            </div>
            <a class="btn" href="javascript:;" id="queryBtn" style="background-color: #2a5ab1;">查询</a>
            <a class="btn" href="javascript:;" id="exportBtn" style="background-color: #2a5ab1;">打印</a>
        </div>

        <div class="echart">
            <div id="myCharts"></div>
        </div>
        <div id="allTable" class="carousel slide">
            <div id='imageLable' class="clearfix" style="margin-left:38px;margin-right:38px;"></div>
            <br>
            <div id="moreRows"
                 style="cursor:pointer;padding-top: 0px;font-size: 15px;border-top: -10px;width: 100%;text-align: center;display:none;"
                 onclick="Evidence.morePictureList('trackTable');">加载更多
            </div>
        </div>
    </div>
</div>
</div>
<div class="largeImgPop dn">
    <a class="close pa" href="javascript:;"></a>
    <div class="cont-body clearfix">
        <div class="cont-img fl pr">
            <div class="imgWarp">
                <img id="largeImgage"
                     src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498493332443&di=941b561f993a2d0b62930ed604b2dd6e&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F53bf465be4aa3.jpg">
                <video style="width:100%;height:90%" controls="controls" id="largeVideo"></video>
            </div>
            <a class="prevNext prev" href="javascript:;">&lsaquo;</a>
            <a class="prevNext next" href="javascript:;">&rsaquo;</a>
            <div class="pageSize tc pa"></div>
        </div>
        <div class="cont-map fl" id="mymap">

        </div>
    </div>
</div>


<!-- 弹出图片在里面（Modal） -->
<div id="matterPointModal" class="modal hide" tabindex="-1" role="dialog" data-backdrop="static"
     aria-labelledby="myModalLabel" aria-hidden="true" style="width:1000px;height:500px">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h5 id="myModalLabel">点编辑框</h5>
    </div>
    <div class="" id="imagTable">
        <!-- <span id=imagId></span> -->
        <div id="imagId1" class="carousel slide" data-interval="false">

            <table class="table" id="imagIdTable">
            </table>
        </div>
    </div>
    <div class="modal-footer">
        <a class="btn closeBtn" data-dismiss="modal" aria-hidden="true">关闭</a>
    </div>
</div>


<script src="<%=basePath %>resources/js/common/main/HashMap.js"></script>
<script src="<%=basePath %>resources/js/common/main/global.js"></script>
<script src="<%=basePath %>resources/js/common/main/mapToop.js"></script>
<script src="<%=basePath %>resources/js/common/main/nav.js"></script>
<script src="<%=basePath %>resources/js/business/evidence/picture.js"></script>
</body>
</html>